<template >
  <div class="Header">
    <span class="logo">
      <el-icon><Opportunity /></el-icon>
      创新项目申报系统
    </span>
    <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
      <DArrowLeft v-if="$store.state.asideWidth == '250px'"/>
      <DArrowRight v-else/>
    </el-icon>
    <el-tooltip content="刷新" placement="bottom" effect="light">
      <el-icon class="icon-btn" @click="handleRefresh"><Refresh /></el-icon>
    </el-tooltip>
    <div class="right">
      <el-tooltip content="全屏" placement="bottom" effect="light">
        <el-icon class="icon-btn" @click="toggle">
          <FullScreen v-if="!isFullscreen" />
          <Crop v-if="isFullscreen" />
        </el-icon>
      </el-tooltip>
      <el-dropdown class="dropdown" @command="handleDropdown">
        <span class="el-dropdown-link">
          <el-icon class="mr-2"><User /></el-icon>
          你好！{{ $store.state.user.fullname }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="modifyPassword"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item command="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <!-- <el-drawer
    v-model="modifyPasswordDrawer"
    title="修改密码"
    size="45%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="formRef"
      :rules="rules"
      :model="form"
      class="w-[250px]"
      label-width="80px"
    >
      <el-form-item prop="oldPassword" label="旧密码">
        <el-input
          v-model="form.oldPassword"
          placeholder="请输入原密码"
          type="password"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="newPassword1" label="新密码">
        <el-input
          type="password"
          show-password
          v-model="form.newPassword1"
          placeholder="请输入新密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="newPassword2" label="确认密码">
        <el-input
          type="password"
          show-password
          v-model="form.newPassword2"
          placeholder="请再次输入新密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type=""
          round
          class="bg-indigo-500 text-light-200"
          @click="handleModifyPassword"
          :loading="loading"
          >提 交</el-button
        >
      </el-form-item>
    </el-form>
  </el-drawer> -->

  <form-drawer
    ref="formDrawerRef"
    title="修改密码"
    destroyOnClose
    @submit="handleModifyPassword"
  >
    <el-form
      ref="formRef"
      :rules="rules"
      :model="form"
      class="w-[250px]"
      label-width="80px"
    >
      <el-form-item prop="oldPassword" label="旧密码">
        <el-input
          v-model="form.oldPassword"
          placeholder="请输入原密码"
          type="password"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="newPassword1" label="新密码">
        <el-input
          type="password"
          show-password
          v-model="form.newPassword1"
          placeholder="请输入新密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="newPassword2" label="确认密码">
        <el-input
          type="password"
          show-password
          v-model="form.newPassword2"
          placeholder="请再次输入新密码"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>

<style>
.Header {
  @apply flex items-center bg-indigo-500 text-light-400 fixed top-0 left-0 right-0;
  height: 64px;
  z-index: 1000;
}
.Header .right {
  @apply ml-auto flex items-center;
}
.Header .logo {
  width: 250px;
  height: 64px;
  @apply flex justify-center items-center text-2xl font-thin;
}
.Header .icon-btn {
  @apply flex justify-center items-center text-xl;
  width: 42px;
  height: 64px;
  cursor: pointer;
}
.Header .icon-btn:hover {
  @apply bg-indigo-400;
}
.Header .dropdown {
  cursor: pointer;
  @apply flex justify-center items-center mx-5;
  height: 64px;
}
.Header .dropdown .el-dropdown-link {
  @apply flex items-center text-light-400;
}
</style>

<script setup>
import { removeToken } from "@/composables/auth";
import { messageBox, message } from "@/composables/util";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { useFullscreen } from "@vueuse/core";

import { ref, reactive } from "vue";

import { modifyPassword } from "@/api/apiv1";
import FormDrawer from "@/components/FormDrawer.vue";

// const modifyPasswordDrawer = ref(false);

const { isFullscreen, toggle } = useFullscreen();

const store = useStore();

const router = useRouter();

const handleDropdown = (c) => {
  switch (c) {
    case "modifyPassword":
      //   modifyPasswordDrawer.value = true;
      formDrawerRef.value.open();
      break;
    case "handleLogout":
      handlelogout();
      break;
  }
};

const handlelogout = () => {
  messageBox("是否要退出登录？")
    .then((res) => {
      store.dispatch("logout");
      router.push("/login");
      message("退出登录成功");
    })
    .catch((err) => {});
};

const handleRefresh = () => location.reload();

const form = reactive({
  oldPassword: "",
  newPassword1: "",
  newPassword2: "",
});

const rules = {
  oldPassword: [
    { required: true, message: "请输入原密码", trigger: "blur" },
    { min: 5, message: "长度不能低于6位", trigger: "blur" },
  ],
  newPassword1: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 5, message: "长度不能低于6位", trigger: "blur" },
  ],
  newPassword2: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 5, message: "长度不能低于6位", trigger: "blur" },
  ],
};

const formRef = ref(null);
const formDrawerRef = ref(null);
// 提交修改密码请求
const handleModifyPassword = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return false;
    }
    formDrawerRef.value.showLoading();
    modifyPassword(store.state.user.id, form)
      .then((res) => {
        if (res.code == 200) {
          message("修改成功,请重新登录");
          modifyPasswordDrawer.value = false;
          store.dispatch("logout");
          router.push("/login");
        } else {
          message(res.msg, "info");
        }
      })
      .catch((err) => {
        message(err, "error");
      })
      .finally(() => {
        formDrawerRef.value.hideLoading();
      });
  });
};


</script>
